<template>
	<view>
		<rf-topSearch headNavigationType="1" @fan="fan" ></rf-topSearch>
		<view class="contert">
			<view class="top">
				<image src="../../static/xsms2.png" mode=""></image>
			</view>

			<view class="vvv">
				<view class="about" v-if="shopData.length !=0">
					<view class="ab1" @click="toDetail(item.id,item.spikeId)"  v-for="(item,index) in shopData" :key="index">
						<view class="cn">
							距结束还有
						</view>
						<view class="tmm">
							<!-- 123 -->
							<view class="one">
								{{hour}}
							</view>
							<view class="mao">
								:
							</view>
							<view class="two">
								{{minute}}
							</view>
							<view class="mao">
								:
							</view>
							<view class="three">
								{{second}}
							</view>
						</view>
						<view class="price1">
							￥{{item.price}}
						</view>
						<view class="name1">
							{{item.name}}
						</view>
						<view class="grab1">
							{{item.sales}}件已抢
						</view>
						<view class="img11">
							<image :src="item.picture" mode="widthFix"></image>
						</view>
					</view>
				

				</view>
			</view>
			<view class="top1">
				<image src="../../static/xsms1.png" mode=""></image>
			</view>
			<view class="time">
				<view class="log">
					<image src="../../static/msnz.png" mode=""></image>
				</view>
				<view class="cn">
					限时秒杀
				</view>
				<view class="cn1">
					距结束
				</view>
				<view class="tmm">
					<!-- 123 -->
					<view class="one">
						{{hour}}
					</view>
					<view class="mao">
						:
					</view>
					<view class="two">
						{{minute}}
					</view>
					<view class="mao">
						:
					</view>
					<view class="three">
						{{second}}
					</view>
				</view>
			</view>
			<view class="select">
				<view :class="is_select==1?'left':'right'" @click="select(1)">
					正在秒杀
				</view>
				<view :class="is_select==2?'left':'right'" @click="select(2)">
					即将秒杀
				</view>
				<view :class="is_select==3?'left':'right'" @click="select(3)">
					更多预告
				</view>
			</view>

		<view class="select" v-if="cateData.length !=0">
			<view class="cont" v-for="(item,index) in cateData" :key="index" @click="selectCate(item.id)" >{{item.title}}</view>
		</view>
		<view class="foott" v-if="shopData.length !=0">
			<view class="foot" @click="toDetail(item.id,item.spikeId)"  v-for="(item,index) in shopData" :key="index">
				<view class="left">
					<image :src="item.picture" mode=""></image>
				</view>
				<view class="right">
					<view class="cont">
						{{item.name}}
					</view>
					<view class="grab">
						已抢{{item.sales}}件
					</view>
					<view class="price">
						秒杀价: ￥{{item.price}}
					</view>
					<view class="tu1">
						<image src="../../static/qiang.png" mode=""></image>
					</view>
				</view>
			</view>
			
		</view>
		</view>
	</view>
</template>

<script>
	import topSearch from "@/components/rf-topSearch/rf-topSearch"
	import { spikeIndex } from "@/api/product";
	export default {
		components: { topSearch },
		data() {
			return {
				time: 48,
				time1: 58,
				is_select:1,
				interval:'',
				cate_id:'',
				cateData:[],
				shopData:[],
				hour:'00',
				minute:'00',
				second:'00',

			};
		},
		onLoad(option) {
			
		},
		onHide(){
			clearInterval(this.interval)
		},
		onShow(){
			this.init();
		},
		onPullDownRefresh() {
			this.init('refresh');
		},
		methods:{
			fan() {
				this.$router.go(-1)
			},
			init(){
				this.$get(`${spikeIndex}`, {type:this.is_select,cate_id:this.cate_id}).then(r => {
					console.log(r)
					clearInterval(this.interval)
					this.shopData = r.data.spikeData;
					this.cateData = r.data.cateData;
					if (r.data.nowLastTime==0){
						return
					}
					this.hour = Math.floor(r.data.nowLastTime/3600)<10?'0'+Math.floor(r.data.nowLastTime/3600):Math.floor(r.data.nowLastTime/3600);
					this.minute = Math.floor(r.data.nowLastTime%3600/60)<10?'0'+Math.floor(r.data.nowLastTime%3600/60):Math.floor(r.data.nowLastTime%3600/60);
					this.second = Math.floor(r.data.nowLastTime%3600%60)<10?'0'+Math.floor(r.data.nowLastTime%3600%60):Math.floor(r.data.nowLastTime%3600%60);
					if(this.shopData.length !=0){
						this.initInterval();
					}
					
				}).catch((err) => {
					console.log(err)
				});
			},
			initInterval(){
				let that = this;
				this.interval = setInterval(function () {
					if(that.minute== '00'){
						that.minute = 60;
						that.hour -- ;
						if (that.hour<10){
							that.hour = '0'+that.hour;
						}
					}
					if(that.second==0){
						that.second = 60;
						that.minute -- ;
						if (that.minute<10){
							that.minute = '0'+that.minute;
						}
					}
					that.second--;
					if (that.second<10){
						that.second = '0'+that.second;
					}
					if (that.hour=='00' && that.minute=='00' && that.second == '00'){
						this.init();
					}
				},1000)
			},
			toDetail(id,spikeId) {
				if (this.is_select == '3'){
					return;
				}
				uni.navigateTo({
					url: `/pages/product/activeProduct?id=${id}&type=spike&spikeId=${spikeId}`
				})
			},
			select(type) {
				this.is_select = type;
				this.init();
			},
			selectCate(type) {
				this.cate_id = type;
				this.init();
			},

		}
	}
</script>

<style lang="scss" scoped>

	.select {
		height: 130upx;
		width: 100%;
		background:rgba(255,39,0,1);
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
		justify-content: space-between;
		.cont {
			// width: 108upx;
			height: 48upx;
			// float: left;
			display:inline-block;
			margin-top: 25upx;
			background:rgba(192,2,2,1);
			border-radius:36px;
			text-align: center;
			padding: 10upx;
			color: #FFFFFF;
			line-height: 34upx;
			margin-left: 30upx;
		}
	}
	.contert {
		// height:1000upx;
		width: 100%;
		// background-color: #F1BAB0;
	}
	.top {
		width: 100%;
		height: 350upx;
		// background-color: #007AFF;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.top1 {
		width: 100%;
		height: 260upx;
		// background-color: #007AFF;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.vvv {
		overflow: hidden;
		.about {
			height: 250upx;
			width: 100%;
			padding-top:20upx ;
			 // display: flex;
			overflow-x: auto;
			overflow-y: hidden;
			white-space: nowrap;
			justify-content: space-between;
			.ab1 {
				position: relative;
				width: 310upx;
				height: 230upx;
				// overflow:auto;
				background:linear-gradient(134deg,rgba(255,114,98,1) 0%,rgba(218,20,11,1) 100%);
				box-shadow:0px 2px 3px 0px rgba(221,0,0,0.5);
				margin-left: 20upx;
				display:inline-block;
				 white-space: nowrap;
				 .cn {
				 	float: left;
					display: inline-block;
				 	margin-left: 20upx;
				 	font-size: 24upx;
					width: 40%;
					line-height: 70upx;
				 	color: #fff;
				 }
				 .tmm {
				 	// width: 150upx;
					width: 60%;
					display: inline-block;
				 	// background-color: #f3f3f3;
				 	height: 40upx;
				 	// float: left;
				 	margin-left: 20upx;
				 	font-size: 24upx;
				 	margin-top: 12upx;
					color:rgba(245,1,3,1);
				 	// background-color: #000;
				 	.one {
				 		float: left;
				 		height: 40upx;
				 		width: 40upx;
				 		background-color: #fff;
				 		border-radius: 3px;
				 		text-align: center;
				 		color: #FF383B;
				 		line-height: 40upx;
				 	}
				 	.mao {
				 		float: left;
				 		color: #fff;
				 		line-height: 40upx;
				 	}
				 	.two {
				 		float: left;
				 		height: 40upx;
				 		width: 40upx;
				 		background-color: #fff;
				 		border-radius: 3px;
				 		text-align: center;
				 		color: #FF383B;
				 		line-height: 40upx;
				 	}
				 	.three {
				 		float: left;
				 		height: 40upx;
				 		width: 40upx;
				 		background-color: #fff;
				 		border-radius: 3px;
				 		text-align: center;
				 		color: #FF383B;
				 		line-height: 40upx;
				 	}
				 }
				 .price1 {
					 position: absolute;
					 width:96upx;
					 height:44upx;
					 font-size:32upx;
					 font-family:PingFangSC-Medium,PingFang SC;
					 font-weight:500;
					 color:rgba(255,255,255,1);
					 line-height:44upx;
					 top: 60upx;
					 left: 20upx;
				 }
				 .name1 {
					 position: absolute;
					 height:44upx;
					 font-size:32upx;
					 font-family:PingFangSC-Medium,PingFang SC;
					 font-weight:500;
					 color:rgba(255,255,255,1);
					 line-height:44upx;
					 bottom: 70upx;
					 left: 20upx;
					 width: 90px;
					 overflow: hidden;
					 text-overflow: ellipsis;
				 }
				 .grab1 {
					 position: absolute;
					 font-size:24upx;
					 font-family:PingFangSC-Regular,PingFang SC;
					 // font-weight:400;
					 color:rgba(223,32,22,1);
					 bottom: 20upx;
					 left: 20upx;
					 background-color: #FFFFFF;
					 border-radius: 6px;
					 }
					 .img11 {
						 position: absolute;
						 right: 20upx;
						 bottom: 0;
						 width: 80upx;
						 image {
							 width: 100%;
							 height: 100%;
						 }
					 }
			}
		}
	}
	.select {
		width: 100%;
		height: 80upx;
		.left {
			float: left;
			width: 33.333%;
			background-color: #fff;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			color:#FF383B;
		}
		.right {
			float: left;
			width: 33.333%;
			height: 80upx;
			color:#FFF;
			line-height: 80upx;
			text-align: center;
			background:#C00202;
		}
		.right1 {
			float: left;
			width: 33.333%;
			height: 80upx;
			color:#FFF;
			line-height: 80upx;
			text-align: center;
			background:linear-gradient(165deg,rgba(255,105,109,1) 0%,rgba(255,56,59,1) 100%);
		}
	}
	.time {
		width: 100%;
		height: 80upx;
		padding-left: 10upx;
		padding-right: 10upx;
		padding-top: 10upx;
		// background:rgba(205,46,33,1);
		background-image: url(../../static/xsms121.png)  ;
		background-size: 100%;
		// padding: 20upx;
		// float: left;
		.log {
			width: 34upx;
			height: 34upx;
			margin-top: 2%;
			// background-color: #fff;
			margin-left: 10upx;
			display: inline-block;
			float: left;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.cn {
				float: left;
				margin-left: 25upx;
				font-size: 30upx;
				margin-top:1%;
				color: #fff;
			}
			.cn1 {
				float: left;
				margin-left: 25upx;
				font-size: 24upx;
				// margin-top: 12upx;
				margin-top: 12upx;
				font-family:PingFangSC-Medium,PingFang SC;
				color: #fff;
			}
			.tmm {
				width: 300upx;
				// background-color: #f3f3f3;
				height: 40upx;
				float: left;
				margin-left: 25upx;
				font-size: 30upx;
				margin-top: 12upx;
				// background-color: #000;
				.one {
					float: left;
					height: 40upx;
					width: 40upx;
					background-color: #fff;
					border-radius: 3px;
					text-align: center;
					color: #FF383B;
					line-height: 40upx;
				}
				.mao {
					float: left;
					color: #fff;
					line-height: 40upx;
				}
				.two {
					float: left;
					height: 40upx;
					width: 40upx;
					background-color: #fff;
					border-radius: 3px;
					text-align: center;
					color: #FF383B;
					line-height: 40upx;
				}
				.three {
					float: left;
					height: 40upx;
					width: 40upx;
					background-color: #fff;
					border-radius: 3px;
					text-align: center;
					color: #FF383B;
					line-height: 40upx;
				}
			}
	}

		.foott {
			background-color: #FF2700;
			padding-bottom: 10upx;
			padding-top: 20upx;
			.foot {
				width: 95%;
				height: 260upx;
				margin-bottom: 10px;
				// padding-left: 20upx;
				// padding-right: 20upx;
				margin-left: 20upx;
				margin-right: 20upx;
				background-color: #fff;
				border-radius: 5px;
				image{
					border-radius: 5px 0 0 5px;
				}
				.left {
					width: 260upx;
					height: 260upx;
					display: inline-block;
					// background-color: #FF0000;
					float: left;

					image {
						width: 100%;
						height: 100%;
						border-radius: 5px 0 0 5px;
					}
				}
				.right {
					position: relative;
					float: left;
					width: 450upx;
					height: 260upx;
					.cont {
						word-break: break-all;
						word-wrap: break-word;
						margin-top: 10upx;
						// margin-left: 20upx;
						padding-left: 20upx;
						padding-right: 10upx;
						font-size:28upx;
						font-family:PingFangSC-Regular,PingFang SC;
						display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
						overflow: hidden;
						}
					.grab {
						display: inline-block;
						margin-top: 10upx;
						background:rgba(255,153,155,1);
						color:rgba(255,39,0,1);
						font-weight:400;
						font-size: 24upx;
						border-radius: 2px;
						margin-left: 20upx;
						margin-top: 30upx;
						height: 36upx;
						line-height: 35upx;
						padding: 5upx;

					}
					.price {

						color: #FF383B;
						font-size: 28upx;
						display: inline-block;
						// font-weight:500;
						font-weight:bold;
						font-family:PingFangSC-Medium,PingFang SC;
						position: absolute;
						bottom: 20upx;
						left: 20upx;
					}
					.tu1 {
						float: right;
						width: 48upx;
						height: 58upx;
						margin-top: 60upx;
						margin-right: 30upx;
						image {
							width: 100%;
							height: 100%;
						}
					}

				}

			}
		}
</style>
